<template>
  <div id="app">
    <span class="click" @click="openClick">点击打开 Message Box</span>
    <message-box :flag="flag" :isActive="isActive" :isSuccess="isSuccess" @closeBox="closeClick" @surebox="sureClick"></message-box>
    <div class="deleteCancel" v-show="isActive">
        <span>已取消删除</span>
    </div>
    <div class="deleteSuccess" v-show="isSuccess">
        <span>✔已成功删除</span>
    </div>
  </div>
</template>

<script>
  import MessageBox from './components/MessageBox.vue'
  export default {
    name: 'App',
    components: {
      MessageBox,
    },
    data() {
      return {
        flag: false,
        isActive: false,
        isSuccess: false,
      }
    },
    methods: {
      openClick() {
        this.flag = !this.flag;
      },
      closeClick(data) {
        // console.log(data);
        this.flag = data.cflag;
        this.isActive = !data.cisActive;
        console.log(this.isActive);
      },
      sureClick(data) {
        this.flag = data.cflag;
        this.isSuccess = data.cisSuccess;
        console.log(this.isSuccess);
      }
    }
  }
</script>

<style>
  @import './assets/css/common.css';
  .click{
      padding: 20px;
      cursor: pointer;
  }
  .deleteCancel,.deleteSuccess {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translate(-50%);
    width: 400px;
    height: 35px;
    background-color: rgba(0, 0, 0, 0.1);
    padding: 5px 20px;
    line-height: 35px;
    border-radius: 10px;
  }
  .deleteSuccess{
    background-color: aquamarine !important;
  }
  .deleteCancel span,.deleteSuccess span{
    font-size: 14px;
  }
</style>
